<template>
	<picker-view :value="value" @change="onChange" :mask-style="optionsSync.maskStyle" :indicator-style="optionsSync.indicatorStyle"
	class="yb-picker-view"
	:id="customIdSync"
	:class="customClassSync"
	:style="customStyleSync">
		<template v-if="cascade > 0">
			<picker-view-column v-for="(picker, i) in pickers" :key="i">
					<view class="item yb-flex" v-for="(item, index) in picker" :key="index" :style="{
						height: Util.pixelunit(optionsSync.itemHeight)
					}">
						<text class="text" :style="{
							color: optionsSync.color,
							'font-size': Util.pixelunit(optionsSync.size)
						}">{{item.label}}</text>
				 </view>
			</picker-view-column>
		</template>
		<template v-else>
			<picker-view-column v-for="(child, i) in data" :key="i">
					<view class="item yb-flex" v-for="(item, index) in child" :key="index" :style="{
						height: Util.pixelunit(optionsSync.itemHeight)
					}">
						<text class="text" :style="{
							color: optionsSync.color,
							'font-size': Util.pixelunit(optionsSync.size)
						}">{{item.label}}</text>
				 </view>
			</picker-view-column>
		</template>
	</picker-view>
</template>

<script>
	import ComponentMixin from '../../js_sdk/componentMixin.js'
	import Util from '../../js_sdk/util.js'
	export default {
		mixins: [ComponentMixin],
		props: {
			data: {
				type: Array,
				default () {
					return new Array
				}
			},
			value: {
				type: Array,
				default () {
					return new Array
				}
			},
			cascade: {
				type: Number,
				default: 0
			},
			options: {
				type: Object,
				default () {
					return new Object
				}
			}
		},
		computed: {
			Util () {
				return Util
			},
			optionsSync () {
				return Object.assign({}, {
					color: '#333',
					itemHeight: '100rpx',
					indicatorStyle: `height:${uni.upx2px(100)}px;background-color: rgba(100,100,100,.1)`,
					maskStyle: '',
					size: '35rpx'
				}, this.options)
			}
		},
		data () {
			return {
				pickers: [],
				values: []
			}
		},
		mounted () {
			if ( this.data.length > 0 ) {
				if ( this.cascade > 0 ) {
					this.values = this.value && this.value.length > 0 ? this.value : new Array(this.cascade).fill(0)
					this.pickers = new Array(this.cascade).fill(null)
					this.handlePickers(this.data, 0)
				}
			}
		},
		methods: {
			handlePickers (data, i) {
				if ( i < this.cascade ) {
					this.$set(this.pickers, i, data)
					if ( data && data[this.values[i]] && data[this.values[i]].child && data[this.values[i]].child.length > 0 ) {
						this.handlePickers(data[this.values[i]].child, i+1)
					} else if ( this.pickers[i+1] ) {
						this.handlePickers(null, i+1)
					}
				}
			},
			onChange (e) {
				this.values = new Array(this.cascade > 0 ? this.cascade : this.data.length).fill(0).map((val, key) => {
					return e.detail.value[key] >= 0 ? e.detail.value[key] : (this.pickers[key] && this.pickers[key].length > 0) ? 0 : null
				})
				let values = []
				if ( this.cascade > 0 ) {
					this.handlePickers(this.data, 0)
				}
				this.$nextTick(function () {
					this.values.forEach((value, key) => {
						let item = null
						if ( this.cascade > 0 ) {
							item = this.pickers[key] ? this.pickers[key][value] : null
						} else {
							item = this.data[key] ? this.data[key][value] : null
						}
						values.push({
							index: value,
							label: item ? item.label : null,
							value: item ? item.value : null
						})
					})
					this.$emit('change', values)
				})
			}
		},
		watch: {
			data (newVal) {
				if ( newVal.length > 0 ) {
					if ( this.cascade > 0 ) {
						this.values = this.value && this.value.length > 0 ? this.value : new Array(this.cascade).fill(0)
						this.pickers = new Array(this.cascade).fill(null)
						this.handlePickers(newVal, 0)
					} else {
						this.values = this.value && this.value.length > 0 ? this.value : new Array(newVal.length).fill(0)
					}
				}
			}
		}
	}
</script>

<style scoped>
	.yb-picker-view {
		height: 600rpx;
	}
	.yb-picker-view .item {
		align-items: center;
		justify-content: center;
	}
</style>